<template>
	<view
		class="MaterialResource"
		:class="{
			skelett: isSkelett
		}"
	>
		<view class="MaterialResource-item">
			<view class="MaterialResource-item-main" v-if="formatList.length">
				<view
					class="MaterialResource-item-main-box"
					v-for="(item, index) in formatList"
					:key="index"
					:style="{ marginTop: boxMaginTop }"
				>
					<view
						class="MaterialResource-item-main-box-item"
						:key="subIndex"
						:style="[staticItemStyle]"
						v-for="(subItem, subIndex) in item"
					>
						<template v-if="!isSkelett">
							<image
								lazy-load
								mode="aspectFill"
								:src="subItem.coverUrl || subItem.previewUrl || subItem.url"
								@click.prevent.stop="openPreview(index, subIndex)"
								class="MaterialResource-item-main-box-item-image"
							/>
							<!-- 选中 取消 -->
							<image
								v-show="isBatchIcon"
								class="static-image-status"
								@click="changeSingleIsActive(index, subIndex, subItem)"
								:src="needIconObject[subItem.isActive ? 'active' : 'default']"
							/>

							<template v-if="subItem.materialType === 2">
								<view class="video-icon" @click.prevent.stop="openPreview(index, subIndex)">
									<image src="@/static/images/my/video-icon.png" />
								</view>
								<!-- <text class="duration">{{ subItem.duration }}</text> -->
							</template>
						</template>
					</view>
				</view>
			</view>
			<view class="empty-wapper" v-else>
				<image :src="emptyImage" />
			</view>
		</view>

		<template v-if="isPreview">
			<DistributionResourcePreview
				remote
				frequency
				v-model="isPopup"
				:list="previewList"
				:index="previewCurrentIndex"
				@changeIndex="changePreviewCurrentIndex"
			/>
		</template>
	</view>
</template>

<script>
import { chunk } from 'lodash';
import { defaultImageUrl } from '@/utils';
import { getMaterialFileSize } from '@/utils/common';

import DistributionResourcePreview from '@/components/distributionResourcePreview';

const defaultPrefix = `${defaultImageUrl}image/`;

const downIcon = Object.freeze(`${defaultImageUrl}icon/icon_download.png`);
const videoIcon = Object.freeze(`${defaultImageUrl}icon/icon_upload_video.png`);
const imageIcon = Object.freeze(`${defaultImageUrl}icon/icon_upload_picture.png`);

const needIconObject = Object.freeze({
	default: `${defaultImageUrl}icon/icon_choose_default.png`,
	active: `${defaultImageUrl}icon/icon_choose_active.png`
});

const { itemSize, marginLeft, widthHeight } = getMaterialFileSize();

export default {
	name: 'MaterialDownloadResource',

	props: {
		isSkelett: {
			type: Boolean,
			default: false
		},

		list: {
			type: Array,
			default: () => {
				return Array.from({ length: 6 }).map((item) => {});
			}
		},

		skelettSize: {
			type: Number,
			default: 8
		},

		disabled: {
			type: Boolean,
			default: false
		},

		singleDownLoad: {
			type: Boolean,
			default: false
		},

		batchDownLoad: {
			type: Boolean,
			default: false
		},

		otherParams: {
			type: Object,
			default: () => {
				return {};
			}
		},

		clickSingleCallBack: {
			type: Function
		},

		isPreview: {
			type: Boolean,
			default: true
		}
	},

	data() {
		this.marginLeft = marginLeft;
		this.widthHeight = widthHeight;

		return {
			downIcon,
			itemSize,
			imageIcon,
			videoIcon,

			needIconObject,

			isPopup: false,
			previewList: [],
			previewCurrentIndex: undefined,
			emptyImage: `${defaultPrefix}img_nocontent.png`
		};
	},

	computed: {
		formatList() {
			const { list, isSkelett, skelettSize } = this;
			if (!isSkelett) {
				return chunk(list, itemSize);
			}

			const skelettList = Array.from({ length: skelettSize }).map((item) => {});
			return chunk(skelettList, itemSize);
		},

		staticItemStyle() {
			return {
				marginLeft: `${marginLeft}px`,
				width: `${widthHeight}px`,
				height: `${widthHeight}px`
			};
		},

		boxMaginTop() {
			return `${marginLeft}px`;
		},

		isBatchIcon() {
			const { batchDownLoad, singleDownLoad } = this;

			if ((!batchDownLoad && !singleDownLoad) || (!singleDownLoad && batchDownLoad)) {
				return true;
			}

			return false;
		}
	},

	methods: {
		openPreview(index, subIndex) {
			const { list, disabled, isSkelett, isPreview } = this;

			if (isSkelett || disabled) {
				return;
			}

			const previewCurrentIndex = itemSize * index + subIndex;

			const previewList = list.map((item) => {
				const { id, pixel, materialType, coverUrl, previewUrl, url } = item;

				return {
					id,
					previewUrl: materialType === 2 ? coverUrl : previewUrl,
					tempFilePath: coverUrl || previewUrl,
					height: pixel.split('*')[1] || 350,
					type: materialType === 2 ? 'video' : 'image'
				};
			});

			if (!isPreview) {
				this.$emit('openPreview', {
					previewList,
					previewCurrentIndex
				});
				return;
			}

			this.previewCurrentIndex = previewCurrentIndex;
			this.previewList = previewList;

			this.isPopup = true;
		},

		changeSingleIsActive(index, subIndex, params) {
			const { disabled, otherParams } = this;
			if (disabled) {
				return;
			}

			const currentIndex = itemSize * index + subIndex;

			this.$emit(
				'changeResourceListStatus',
				Object.keys(otherParams).length
					? {
							...otherParams,
							currentIndex
					  }
					: {
							...params,
							currentIndex
					  }
			);
		},

		changePreviewCurrentIndex(index) {
			this.previewCurrentIndex = index;
		},

		immediatelyDownFile(params) {
			const { disabled } = this;

			if (disabled) {
				return;
			}

			this.$emit('singleFileDownload', params);
		}
	},

	components: {
		DistributionResourcePreview
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.MaterialResource {
	height: 100%;
	&-item {
		margin-top: 20rpx;
		padding: 0 20rpx 20rpx 20rpx;

		background: #fff;
		border-radius: 24rpx;
		height: calc(100% - 100rpx);
		overflow-y: scroll;
		&-main {
			&-box {
				display: flex;

				overflow: hidden;
				border-radius: 12rpx;

				&-item {
					position: relative;
					background: #ccc; // 防止无缩略图
					border-radius: 12rpx;
					&:first-child {
						margin-left: 0 !important;
					}
					.duration {
						color: #fff;
						font-size: 24rpx;
						padding: 0 8rpx;
						position: absolute;
						bottom: 6rpx;
						right: 6rpx;
						z-index: 4;

						height: 28rpx;
						line-height: 28rpx;
						background: #000;
						border-radius: 8rpx;
					}

					&.sold-out {
						.MaterialResource-item-main-box-item-image {
							opacity: 0.2;
						}
					}

					.static-image-status {
						position: absolute;
						top: 0;
						right: 0;
						width: 36rpx;
						height: 36rpx;

						padding: 8rpx 8rpx 26rpx 26rpx;
					}

					.download-icon {
						position: absolute;
						left: 0;
						bottom: 0;
						width: 48rpx;
						height: 44rpx;
						padding: 26rpx 26rpx 0 0;
					}
				}

				image {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
				}

				&:first-child {
					margin-top: 0;
				}
			}
		}
	}

	&.skelett {
		.MaterialResource-item-main-box-item {
			border-radius: 12rpx;
			background: $skelettBgColor;
		}
	}
}
.video-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50rpx;
	height: 50rpx;
	transform: translate(-50%, -50%);
	image {
		width: 100%;
		height: 100%;
	}
}
.empty-wapper {
	width: 480rpx;
	height: 320rpx;
	margin: 240rpx auto 0;
	image {
		width: 100%;
		height: 100%;
	}
}
</style>
